'use strict';
import React, {Component, PropTypes} from 'react';
import './style.less';
var Slider = require('react-slick');
//import './test.css';
import SwiperBox from './SwiperBox.jsx';
import SwiperBotBox from './SwiperBotBox.jsx';
import SwiperEvent from './SwiperEvent.jsx';
class ComponentBox extends Component {
    constructor( props ) {
        super( props );
        this.state = {
            scrollTo:"left",
            activeIndex:this.props.data.state.activeIndex
        };
    }
    componentDidMount() {

    }
    componentDidUpdate(){

    }
    onChangeIndex(type){
        let {activeIndex} = this.state;
        let {num} = this.props.data.state;
        let len = num;
        //console.log(type,activeIndex)
        if(type == "left"){
            if(activeIndex <= 0){
                activeIndex = len-1;
                //type="right"
            }else{
                activeIndex = activeIndex - 1;
            }
        }else{
            if(activeIndex >= len-1){
                activeIndex = 0;
                //type="left"
            }else{
                activeIndex = activeIndex + 1;
            }
        }
        this.setState({
            scrollTo:type,
            activeIndex
        });

        if(this.props.editMode && this.props.editSwiper){
            this.props.editSwiper(activeIndex)
        }
    }
    onClick(){
        if(this.props.editMode && this.props.editSwiper){
            this.props.editSwiper(this.state.activeIndex)
        }
    }
    render() {

        this.clientWidth = this.props.deviceWidth;
        let {maskWidth,picItems,itemSpace,multiple} = this.props.data.state;
        let {scrollTo,activeIndex} = this.state;
        //  debugger;
        let clientWidth = this.clientWidth;
        //centerWidth = centerWidth >= clientWidth ? clientWidth - itemSpace * 2 - 30 : centerWidth;
        //let maskWidth = (clientWidth - centerWidth - itemSpace * 2) / 2;
        let centerWidth = clientWidth - maskWidth*2 - itemSpace*2
        let itemWidth = centerWidth;
        let itemHeight = itemWidth / multiple;
        //console.log(picItems,activeIndex);
        return(
            <div className="swiper_box">
                <i className="hed" />
                <SwiperBox
                    num={this.props.data.state.num}
                    editMode={this.props.editMode}
                    scrollTo={scrollTo}
                    picItems={picItems}
                    activeIndex={activeIndex}
                    onChangeIndex={this.onChangeIndex.bind(this)}
                    itemSpace={itemSpace}
                    itemWidth={itemWidth}
                    itemHeight={itemHeight}
                    maskWidth={maskWidth} onClick={::this.onClick}/>
                <SwiperBotBox
                    activeIndex={activeIndex}
                    scrollTo={scrollTo}
                    type={picItems[activeIndex].type ? picItems[activeIndex].type:3}
                    items={picItems[activeIndex].items}
                    centerWidth={centerWidth}/>
            </div>
        )
    }
}

export default ComponentBox;
